【Day10】讓排版更簡單的RWD新利器 - CSS container

15th鐵人賽

卡羅奇奇

2023-09-25 00:30:33

739 瀏覽

分享至

CSS container

CSS container支援度:Can I Use)
CSS @container支援度:Can I Use)

第一次知道CSS container是因為工作上需要，才會查到，情境如下:

.container{
    width:100%;
    height:30vh;
    .child{
       /* font-size須根據容器大小變化 */
       font-size:5cqh;
    }
    &.active{
       height:50vh;
       .child{
            /* font-size須根據容器大小變化 */
            font-size:10cqh;
       }
    }
}

雖然可以有其他方法做的到，但看到有這個新屬性就迫不及待研究看看。

CSS container是什麼?

可以指定想要的元素為容器，並根據容器變化做相對應的變化
container屬性是container-type和container-name兩個屬性的縮寫，可以寫成container:container-type/container-name;

屬性	值
`container-type`	`normal`:如果設定`normal`，後代元素只能查詢容器樣式，容器尺寸將不能查詢，亦不能應用。
`container-type`	`inline-size`:設定`inline-size`，則只會查詢容器的inline尺寸，
`container-type`	`size`，設定`size`則inline尺寸及block尺寸都可以查詢。
`container-name`	預設值`default` ；不用使用引號(~~'name'~~)；可以使用CSS變數(--variable)；可以multiple name，需用空格隔開(name1 name2)

CSS Container Unit是什麼?

容器的單位尺寸，與可視區(ViewPort)單位語法與意義相似；
可視區的單位vw、vh、vmin、vmax相似，可對應到cqw、cqh、cqmin、cqmax。

屬性	值
`cqw`	表示容器寬度單位(container query width)。1`cqw`=1%容器寬度。ex:容器100px寬，1`cqw`=1px。
`cqi`	表示容器`inline-size`單位(container query inline-size)。不特別設定下，`inline-size`通常指的是水平方向，對應的會是容器寬度，因此`1cqi`通常等於`1cqw`。
`cqh`	表示容器寬度單位(container query height)。1`cqh`=1%容器高度。ex:容器100px高，1`cqh`=1px。
`cqb`	表示容器`block-size`單位(container query block-size)。不特別設定下，block-size通常指的是垂直方向，對應的會是容器高度，因此`1cqb`通常等於`1cqh`。
`cqmin`	表示容器較小尺寸的單位，ex:容器為寬1000px高800px的容器，較小邊是高800px，這時`1qmin`=1%容器高=8px。
`cqmax`	表示容器較大尺寸的單位，ex:容器為寬1000px高800px的容器，較大邊是寬1000px，這時`1qmax`=1%容器寬=10px。

這篇提到，如果你的容器設定在自適應寬度，像是flex的子元素、abosulte的元素(子元素用自身撐abosulte父元素)、float元素、或是width設定fit-content的元素，container寬度都會為0，因此container相關的設定都會無法作用，2023/09/24實測一樣無作用。